這次要寫的主題是頁面讀取中的動畫 part 1
這個效果其實很簡單 只是針對外框做轉動效果
一樣設定好基本架構

<div class="pre-loader loader-animation"></div>

針對架構放上基本的 css

body{background:#161616;}

.pre-loader{margin:5% auto;
  border:1rem solid #f8f8f8;
  border-top:1rem solid #f6f;
  border-radius:100%;
  width:150px;
  height:150px;
}

這樣的話 pre loader 的雛形就出現了

然後針對這個區塊寫動畫效果
超短 寫個轉動就結束了XD

.loader-animation{
  animation:spining-loader 1s linear infinite; 
}

@keyframes spining-loader{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

如同往常附上codepen
https://codepen.io/UHU/pen/GYyvJq